<template>
  <div id="home">
    <NavBar class="home-nav">
      <template v-slot:center>
        购物街
        </template>
    </NavBar>
     <tabControl
      :title="title"
      class="handle-tab"
       @tabClick="tabClick"
       ref="tabControl0"
       v-show="isTabFixed"
         />
    <Scroll
     class="scroll"
     ref='scroll'
      :probeType='3'
      :pullUpLoad='true'
      @getScrollY='getScrollY'
      @pullingUp='handleMore'>
      <HomeSwiper
      :banner="banner"
      @swiperImgLoad='handleSwiperImgLoad' />
      <HomeRecommend
      :recommend="recommend" />
      <Feature />
      <tabControl
      :title="title"
      class="tab-contol"
       @tabClick="tabClick"
       ref="tabControl" />
      <!-- <GoodsList :goods="goods[currentType].list"/> 太长了用计算属性 -->
      <GoodsList :goods="showGoods" />
    </Scroll>
    <BackTop
      @click.native="backClick"
      v-show="isFlag"/>
  </div>
</template>

<script>
// 导入公共组件
import NavBar from '@/components/common/navbar/NavBar.vue'
import tabControl from '@/components/content/tabControl/tabControl.vue'
import GoodsList from '@/components/content/goods/GoodsList.vue'
import Scroll from '@/components/common/scroll/Scroll.vue'
// 导入子组件
import HomeSwiper from './childComps/HomeSwiper'
import HomeRecommend from './childComps/HomeRecommend'
import Feature from './childComps/Feature'
// 导入请求
import { Home, HomeGoods } from '@/api/home.js'
// 引入共同代码
import { common, backTop } from '@/mixin/mixin.js'
export default {
  mixins: [common, backTop],
  data () {
    return {
      banner: [],
      recommend: [],
      title: ['流行', '新款', '精选'],
      goods: {
        // 也很有技巧性
        pop: { page: 0, list: [] }, // 这个名字和发送请求的参数一样
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      currentType: 'pop',
      // isFlag: false,
      taboffsetTop: 0,
      isTabFixed: false,
      saveY: 0
    }
  },
  async mounted () {
    // 获取首页数据 /home/multidata
    const res = await Home.Req('/home/multidata')
    // 因为res调用后会被销毁 所以需要保存数据
    this.banner = res.data.banner.list // 赋地址
    this.recommend = res.data.recommend.list
    // 拿Goods数据 传入参数为对象
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  methods: {
    // 封装一个方法把 切换栏上面所有第一页数据通过传参拿过来
    async getHomeGoods (type) {
      // console.log(this.goods)
      const obj = {
        type: type,
        page: this.goods[type].page + 1 // 这里很有技巧 为了下拉上拉刷新
      }
      const goodsRes = await HomeGoods.Req(obj)
      // console.log(goodsRes.data)
      // 将获取的数字添加到里面
      this.goods[type].list.push(...goodsRes.data.list)
      // 将原先页面+1
      this.goods[type].page += 1
    },
    // 事件监听的方法
    tabClick (index) {
      // alert(index)
      // 处理切换栏 点击对应的渲染对应的
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      this.$refs.tabControl.currentIndex = index
      this.$refs.tabControl0.currentIndex = index
    },
    // 获取滚动数据 处理显示隐藏滚动
    getScrollY (y) {
      this.isShow(y)
      // 处理tabControl是否吸顶
      this.isTabFixed = -y >= this.taboffsetTop
    },
    // 处理下拉加载更多
    handleMore () {
      this.getHomeGoods(this.currentType)
    },
    handleSwiperImgLoad () {
      // 图片加载完成后 拿到组件所在的高度
      this.taboffsetTop = this.$refs.tabControl.$el.offsetTop
    }
    // 防抖
    // 原理第一传进去执行，第二次传进去清空第一次的然后又重新赋值，这样的话在500内输入就始终执行最后一次
    // debounce (func, delay) {
    //   let timer = null
    //   return function (...args) { // 调用这个方法可以传入多个函数
    //     if (timer) clearTimeout(timer)
    //     timer = setTimeout(() => {
    //       func.apply(this, args)// 改变指向--调用函数
    //     }, delay)
    //   }
    // }
  },
  computed: {
    showGoods () {
      return this.goods[this.currentType].list
    }
  },
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    Feature,
    tabControl,
    GoodsList,
    Scroll
  },
  // 钩子函数 实现组件切换数据保存
  activated () {
    this.$refs.scroll.refresh()
    this.scrollTo(0, this.saveY, 0)
    // 刷新一次 不然会莫名的回到顶部 是在这儿
    this.$refs.scroll.refresh()
  },
  deactivated () {
    this.saveY = this.$refs.scroll.getScrollY()
    this.$bus.$off('itemImageLoad', this.busFn)
  }
}
</script>

<style  scoped lang='scss'>
  #home {
    height: 100vh;
    // margin-top: 44px;
    box-sizing: border-box;
    position: relative;
  }
  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
  }
  // .tab-contol {
  //   position: sticky; 在betterScroll中失效 真实开发中也不用这个 太新了 用原生
  //   top: 44px;
  //   background-color: #fff;
  //   z-index: 10;
  // }
  /*   .content{ //这样直接减有两个问题 一是高度会多出来 二 里面的粘性布局失效
      height: calc(100vh - 93px);//44+49
      background-color: pink;
      margin-top: 44px;
      overflow: hidden;
    } */
    .handle-tab{
      position: relative;
      top: 44px;
      left: 0;
      right: 0;
      z-index: 9;
      background-color: #fff;
    }
  .scroll {
    //用绝对定位  //粘性布局失效带解决
    position: absolute; //子觉父相
    top: 44px;
    bottom: 49px; //这样直接拉升
    left: 0;
    right: 0;
    overflow: hidden;
    // background-color: pink;测试
  }
</style>
